<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" href="assets/img/logo.png">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UR Blog</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
    <!-- Theme CSS -->
    <link href="css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link href="css/demo.css" rel="stylesheet">

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="js/jquery_min.js"></script>
    <script src="js/tools.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="assets/css/theme.css">
    <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/blog/">
    <link href="assets/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">

</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top" style="background-color: black;">
        <a class="navbar-brand font-weight-bolder mr-3" href="index.html"><img src="assets/img/logo.png"
                style="width: 40px; height: 39px;"></a>
        <button class="navbar-light navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault"
            aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarsDefault">
            <ul class="navbar-nav mr-auto align-items-center">
                <form class="bd-search hidden-sm-down">
                    <input type="text" class="form-control bg-graylight border-0 font-weight-bold" id="search-input"
                        placeholder="Search..." autocomplete="off">
                    <div class="dropdown-menu bd-search-results" id="search-results">
                    </div>
                </form>
            </ul>
            <ul class="navbar-nav ml-auto align-items-center">
                <li class="nav-item">
                    <a class="nav-link active" href="blog_list.html" style="cursor: pointer;">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="blog_edit.html" tyle="cursor: pointer;">创作</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" onclick="edit()" style="cursor: pointer; color: darkred;">编辑</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" onclick="if(confirm('确定删除?'))deleteBlog()"
                        style="cursor: pointer; color: darkred;">删除</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="person_center.html"><img class="rounded-circle mr-2"
                            src="assets/img/av.png" width="30"><span id="user" class="align-middle"></span></a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        <svg style="margin-top:10px;" class="_3DJPT" version="1.1" viewbox="0 0 32 32" width="21"
                            height="21" aria-hidden="false" data-reactid="71">
                            <path
                                d="M7 15.5c0 1.9-1.6 3.5-3.5 3.5s-3.5-1.6-3.5-3.5 1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5zm21.5-3.5c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5 3.5-1.6 3.5-3.5-1.6-3.5-3.5-3.5zm-12.5 0c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5 3.5-1.6 3.5-3.5-1.6-3.5-3.5-3.5z"
                                data-reactid="22"></path>
                        </svg>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right shadow-lg" aria-labelledby="dropdown02">
                        <span class="dropdown-item"><a href="#" onclick="logout()" class="btn btn-primary d-block"
                                class="fa fa-download">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
                                    class="bi bi-door-open-fill" viewBox="0 0 16 16">
                                    <path
                                        d="M1.5 15a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1H13V2.5A1.5 1.5 0 0 0 11.5 1H11V.5a.5.5 0 0 0-.57-.495l-7 1A.5.5 0 0 0 3 1.5V15H1.5zM11 2h.5a.5.5 0 0 1 .5.5V15h-1V2zm-2.5 8c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z" />
                                </svg> 登出</a></span>
                    </div>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 页面主体 -->
    <div class="container" style="margin: 0;">
        <!-- 左侧个人信息 -->
        <div class="space"></div>
        <div class="container-left">
            <div class="card" style="border-radius: 20px; margin-top: 20px; opacity: 0.9;">
                <div style="font-weight: 750; text-align: center; font-size:larger;">Author</div>
                <img src="assets/images/default-head.png" alt="">
                <h3 style="color: cadetblue;"></h3>
                <div class="counter">
                </div>
                <div class="counter">
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right" style="width: 850px; margin-top: 20px; height: 95%;">
            <!-- 这个 div 里来放博客的内容 -->
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3></h3>
                <!-- 博客时间 -->
                <div class="date"></div>
                <!--博客阅读量-->
                <div class="rcount" style="color: green;"></div>
                <!-- 博客正文 -->

                <div id="content" class="contents" style="opacity: 0.8W; overflow: auto;height: 500px;">
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="comment-container">
        <div class="row" id="bod1"></div>
        <div class="row" id="bod2"></div>
        <div class="comment-wrap" id="comment-wrap" style="width: 1000px; margin-left: 160px;">
            <div class="photo">
                <div class="avatar" style="margin-bottom:50px;background-image: url('assets/images/default-head.png');">
                </div>
            </div>
            <div class="comment-block" id="comment-edit" style="border: solid; border-color: green;">
                <textarea name="" id="comm" cols="30" rows="3" placeholder="Say somthing..."></textarea>
            </div>
            <button
                style="border-radius: 5px; margin-top: 55px; margin-left: -53px; width: 50px;height: 25px; font-size: small;"
                id="sub" onclick="sub()">发表</button>
        </div>


        <div class="comments" id="comment"
            style="overflow:auto;height: 210px; background-color: white; padding: 20px; border-radius: 5px;padding-top: 50px; opacity: 0.9; margin-top: 20px; border: solid; border-color: green;">
            <div class="row" style="margin-top: -30px; color: black;">评论区：</div>
            <div class="comment-wrap">
                <div class="photo">
                    <div class="avatar"
                        style="background-image: url('assets/images/default-head.png');background-size: 100%;">
                    </div>
                    <p style="color: green; " id="comment-name">user</p>
                </div>
                <div class="comment-block" style="border: solid; border-color: green;">
                    <p class="comment-text" id="comment-text" style="width: 800px; height: 100px;">快来发表评论吧~</p>
                    <div class="bottom-comment">
                        <div class="comment-date" id="comment-date">23.5 2014</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var authorId = 1;
        function getBlog() {
            $.ajax({
                type: 'get',
                url: '/art/getone' + location.search,
                success: function (body) {
                    let h3 = document.querySelector(".blog-content h3");
                    h3.innerHTML = body.data.title;
                    let divDate = document.querySelector(".blog-content .date");
                    divDate.innerHTML = body.data.createtime;
                    let divRcount = document.querySelector(".blog-content .rcount");
                    divRcount.innerHTML = "       阅读量：" + body.data.rcount;
                    let divContent = document.querySelector(".blog-content .content");
                    editormd.markdownToHTML('content', {
                        markdown: body.data.content
                    });
                    authorId = body.data.uid;
                }
            });
        }
        getBlog();

        function getUserInfo() {
            jQuery.ajax({
                type: 'get',
                url: '/user/getaut',
                dataType: 'json',
                data: {
                    //将用户id传过去查询作者
                    userid: authorId
                },
                success: function (body) {
                    let username = document.querySelector(".card h3");
                    username.innerHTML = body.data.username;
                },
                error: function (e) {
                    if (e.status == 401) {
                        location.href = "login.html";
                    }
                }
            })
        }
        getUserInfo();

        function deleteBlog() {

            $.ajax({
                type: 'delete',
                url: '/art/del' + location.search,
                success: function (body) {
                    alert("删除成功！");
                    location.href = "blog_list.html";
                },
                error: function (body) {
                    alert("抱歉，服务器繁忙，删除失败");
                    console.log(body.msg);
                }
            })
        }
        function edit() {
            var id = getQueryVariable("blogId");
            location.href = "blog_edit.html?blogId=" + id;
        }

        function getComment() {
            $.ajax({
                type: 'get',
                url: '/comment/getcom' + location.search,
                success: function (body) {
                    for (let comment of body.data) {
                        //整个评论内容容器
                        let container = document.getElementById('comment');
                        //一条评论容器
                        let commentCon = document.createElement('div');
                        commentCon.className = "comment-wrap";
                        container.appendChild(commentCon);
                        //用户容器
                        let userCon = document.createElement('div');
                        userCon.className = "photo";
                        commentCon.appendChild(userCon);
                        //头像
                        let head = document.createElement('div');
                        head.className = "avatar";
                        head.style.backgroundImage = "url('assets/images/default-head.png')";
                        head.style.backgroundSize = "100%";
                        userCon.appendChild(head);
                        //用户名
                        let name = document.createElement('div');
                        name.id = "comment-name";
                        name.style.color = "green";
                        $.ajax({
                            type: 'get',
                            url: '/comment/getname',
                            data: {
                                "uid": comment.uid
                            },
                            success: function (body) {
                                name.innerHTML = body.data.username;
                            }
                        });
                        userCon.appendChild(name);
                        //评论内容容器
                        let contentCon = document.createElement('div');
                        contentCon.className = "comment-block";
                        contentCon.style.border = "solid";
                        contentCon.style.borderColor = "green";
                        commentCon.appendChild(contentCon);
                        //内容
                        let text = document.createElement('p');
                        text.className = "comment-text";
                        text.id = "comment-text";
                        text.innerHTML = comment.content;
                        text.style.width = "800px";
                        text.style.height = "100px";
                        contentCon.appendChild(text);
                        //发布日期容器
                        let bottom = document.createElement('div');
                        bottom.className = "bottom-comment";
                        contentCon.appendChild(bottom);
                        //发布日期
                        let date = document.createElement('div');
                        date.className = "comment-date";
                        date.innerHTML = comment.createtime;
                        date.id = "comment-date";
                        bottom.appendChild(date);
                    }
                },
                error: function (body) {
                    alert("抱歉，服务器繁忙，删除失败");
                    console.log(body.msg);
                }
            })
        }
        getComment();

        function sub() {
            //拿到comment
            var comment = document.getElementById('comm').value;
            jQuery.ajax({
                type: 'post',
                url: '/comment/add' + location.search,
                data: {
                    "content": comment
                },
                success: function (body) {
                    alert("评论发表成功");
                    location.href = "blog_detail.html" + location.search;
                },
                error: function (body) {
                    alert("服务器繁忙");
                    console.log(body.msg);
                }
            })
        }
    </script>
</body>

</html>